<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品列表</title>
		<link rel="stylesheet" href="./static/css/semantic.min.css">
		<link rel="stylesheet" href="./static/css/manster.css">
	</head>
	<body>
		<div class="m-container m-padded-tb-large">
			<div class="ui container">
				<h2 class="ui teal image header">
				    <div class="content">
				        商品浏览
				    </div>
				</h2>
				<div class="ui link cards" id="container">

				</div>
			</div>
		</div>
	</body>
	
	<script src="./static/js/jquery-3.3.1.js"></script>
	<script src="./static/js/semantic.min.js"></script>
	<script>
		var g_itemList = [];
		jQuery(document).ready(function(){
			$.ajax({
				type:"GET",
				url:"http://localhost:8888/item/list",
				xhrFields:{withCredentials:true},
				success:function(data){
					if("success" == data.status){
						g_itemList = data.data;
						reloadDom();
					}else{
						alert("获取商品信息失败，原因为"+data.data.errMsg);
					}
				},
				error:function(data){
					alert("获取商品信息失败，原因为"+data.responseText);
				}
				
			})
			return false;
		});

		
		function reloadDom(){
			for(var i = 0; i < g_itemList.length; i++){
				var itemVO = g_itemList[i];
				var dom = "<div class='card' data-id='" +itemVO.id+ "' id='itemDetail" +itemVO.id+ "'><div class='image'><img src='" +itemVO.imgUrl+ "'></div><div class='content'><div class='header'>" 
				+itemVO.title+ "</div><div class='meta'><a>￥" +itemVO.price+ "</a></div><div class='description'>" 
				+itemVO.description+ "</div></div><div class='extra content'><span class='right floated'>销量 " 
				+itemVO.sales+ "</span><span><i class='user icon'></i>库存:" +itemVO.stock+ "</span></div></div>";
				
				//添加到tbody中
				$("#container").append($(dom));
				
				//跳转到商品详情
				$("#itemDetail"+itemVO.id).on("click", function(e){
					window.location.href = "detailitem.html?id="+$(this).data("id");
				});
			}
		}
	</script>
</html>
